<template>
  <div class="BookInput">
    <el-main class="mainbox" :model="bookForm">
      <!-- 经典版文件上传 -->
      <p style="position: absolute; left: 22%; top: 60%">经典版文件上传</p>
      <p
        v-if="bookForm.docPath"
        style="
          position: absolute;
          left: 13%;
          top: 58%;
          font-size: 14px;
          color: coral;
        "
      >
        已上传：{{ bookForm.docPath }}
      </p>
      <fileUpload
        @file-uploaded="handleFileUploaded"
        style="position: absolute; left: 20%; top: 35%"
      ></fileUpload>

      <div class="book-form">
        <h2 class="form-title1">书元信息</h2>
        <h2 class="BJfont">
          <el-button type="text" @click="isStart()">编辑</el-button>
        </h2>
        <!-- 分割线 -->
        <el-divider class="custom-divider"></el-divider>
        <el-form :model="bookForm" label-width="150px" class="form-content">
          <el-row>
            <el-col :span="8">
              <!-- 不点击编辑按钮 :disabled="startDo ===0 -->
            </el-col>
            <el-col :span="12">
              <el-form-item label="书名">
                <el-input
                  v-model="bookForm.bookName"
                  :disabled="startDo === 0"
                  style="width: 240px"
                >
                  $route.query.bookName</el-input
                >
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="文种">
                <el-select
                  v-model="bookForm.bookLang"
                  :disabled="startDo === 0"
                  style="width: 240px"
                  multiple
                >
                  <el-option label="汉语" value="汉语"></el-option>
                  <el-option label="藏语" value="藏语"></el-option>
                  <el-option label="蒙古语" value="蒙古语"></el-option>
                  <el-option label="西夏文" value="西夏文"></el-option>
                  <el-option label="满文" value="满文"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="四部分类">
                <el-input
                  v-model="bookForm.fourType"
                  :disabled="startDo === 0"
                  style="width: 240px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="成书年代">
                <el-input
                  v-model="bookForm.book_years"
                  :disabled="startDo === 0"
                  style="width: 240px"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="书目简介">
            <el-input
              v-model="bookForm.bookIntroduction"
              type="textarea"
              :disabled="startDo === 0"
              style="width: 590px"
            ></el-input>
          </el-form-item>

          <el-col><el-form-item label="作者信息"></el-form-item></el-col>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所有作者">
                <el-input
                  v-model="bookForm.writers"
                  :disabled="startDo === 0"
                  style="width: 240px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="作者简介">
                <el-input
                  v-model="bookForm.wriIntroduction"
                  :disabled="startDo === 0"
                  style="width: 240px"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-col
            ><el-form-item label="版本信息" style="color: coral"></el-form-item
          ></el-col>
          <el-row>
            <el-col :span="12">
              <el-form-item label="版本">
                <el-input
                  v-model="bookForm.version"
                  :disabled="startDo === 0"
                  style="width: 240px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="卷数量">
                <el-select
                  v-model="bookForm.bookNumber"
                  :disabled="startDo === 0"
                  style="width: 240px"
                >
                  <el-option label="1" value="1"></el-option>
                  <el-option label="2" value="2"></el-option>
                  <el-option label="3" value="3"></el-option>
                  <el-option label="4" value="4"></el-option>
                  <el-option label="5" value="5"></el-option>
                  <el-option label="6" value="6"></el-option>
                  <el-option label="7" value="7"></el-option>
                  <el-option label="8" value="8"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="馆藏">
                <el-input
                  v-model="bookForm.bookCollection"
                  :disabled="startDo === 0"
                  style="width: 240px"
                ></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="创建时间">
                <el-date-picker
                  v-model="bookForm.bookTime"
                  type="date"
                  style="width: 100%"
                  :disabled="startDo === 0"
                ></el-date-picker>
              </el-form-item>
            </el-col> -->
          </el-row>
          <el-form-item>
            <el-button
              type="warning"
              @click="submitForm"
              :disabled="startDo === 0"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-main>
  </div>
</template>

<script>
// import axios from 'axios'
import { getBookData, addBook } from '@/api/book'
import store from '@/store'
export default {
  name: 'BookInput',
  data () {
    return {
      // 编辑控制变量
      startDo: 1,
      // 用户数据
      userForm: {
        uid: '',
        userName: '用户XXX',
        password: '',
        imageIcon:
          'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' // 用户头像地址
      },
      // tableData: [],
      total: '',
      // 书元信息
      bookForm: {
        // bookId: '',
        bookName: '',
        bookLang: [], // 多语言选择，数据类型修改为列表
        fourType: '', // 四部分类
        bookYears: '', // 成书年代
        bookIntroduction: '', // 书目简介
        writers: '', // 所有作者
        wriIntroduction: '', // 作者简介
        version: '', // 版本
        bookNumber: '', // 藏卷数
        bookCollection: '', // 馆藏
        docPath: '', // 经典版文件地址
        docName: '', // 经典版文件名称
        bookOperator: '' // 录入者
      }
    }
  },
  async created () {
    // 获取书目列表数据
    const res = await getBookData(this.pageSize, this.currentPage)
    // console.log(res)
    this.tableData = res.data.records
    this.total = res.data.total
    // 从路由中获取参数值
    // console.log(this.$route.query.bookName)
    this.bookForm.bookName = this.$route.query.bookName
    this.bookForm.bookLang = this.$route.query.bookLang
    // 获取录入人员的id
    this.userForm.bookOperator = store.state.user.userInfo.id
  },
  methods: {
    // 是否开始编辑
    isStart () {
      this.startDo = 1
    },
    // 文件上传
    handleFileUploaded (fileUrl) {
      this.bookForm.docPath = fileUrl.path
      this.bookForm.docName = fileUrl.fileName
      console.log(this.bookForm.docPath, this.bookForm.docName)
    },
    // 表单提交
    async submitForm () {
      const res = await addBook(this.bookForm)
      // console.log(this.bookForm)
      console.log(res)
      // 直接发送 POST 请求
      if (res.code === 1) {
        const bookId = res.data // 获取新增书目id
        this.tableData.push(this.bookForm)
        this.total++
        this.$message.success('提交成功')
        // 直接存储数据到本地
        localStorage.setItem('tableData', JSON.stringify(this.tableData))
        // console.log(this.tableData)
        // 跳转传参
        this.$router.push({
          path: '/imgsInput',
          query: {
            bookId: bookId,
            bookName: this.bookForm.bookName,
            bookLang: this.bookForm.bookLang
            // bookNumber: this.bookForm.bookNumber
          }
        })
      } else if (res.code === 0) {
        // 提交了重复书籍
        this.$message.warning(res.msg)
      } else {
        this.$message.error('提交失败')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.mainbox {
  background-color: #e6e6e7;
}

.BJfont {
  text-align: right;
  margin-bottom: -20px;
}
.el-button--text {
  color: coral !important;
  font-size: 18px;
}

.box_h3 {
  height: 50px;
  display: flex;
  align-items: center;
  /* 在垂直方向上居中对齐 */
  background-color: #ededed;
  margin-left: 30px;
  margin-right: 30px;
  padding-left: 10px;
}

.custom-divider {
  border-top: 2px solid #000;
  /* 设置分割线的边框样式，2px为线条粗细 */
  width: 100%;
  /* 设置分割线的宽度，可以根据需要调整百分比或像素值 */
  margin: 20px auto;
  /* 设置分割线的外边距，实现居中对齐 */
}

.book-form {
  max-width: 1000px;
  margin: 0 auto;
}

.form-title1 {
  font-size: 18px;
  text-align: left;
  margin-bottom: -50px;
}

.form-content {
  max-width: 700px;
  margin-left: 250px;
  padding: 20px;
  // border: 1px solid ;
  border-radius: 5px;
}

.avatar-uploader {
  width: 178px;
  height: 278px;
  border: 1px dashed black;
  border-radius: 6px;
  cursor: pointer;
  position: absolute;
  left: 300px;
  top: 280px;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 278px;
  line-height: 278px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 278px;
  display: block;
}
</style>
